<div class="el-autocomplete">
    <el-input
        ref="input"
        (compositionstart)="handleComposition($event)"
        (compositionupdate)="handleComposition($event)"
        (compositionend)="handleComposition($event)"
        (change)="handleChange($event)"
        (focus)="handleFocus()"
        (keydown)="handleKeydown($event)"
        [model]='selectedValue'
        (modelChange)="handleModelChange($event)"
        (blur)="handleBlur($event)"
    >
        <div #prepend class="el-input-prepend" *ngIf='hasPrepend'>
            <ng-content select='.el-autocomplete-prepend'></ng-content>
        </div>
        <div #append class="el-input-append" *ngIf='hasAppend'>
            <ng-content slect='.el-autocomplete-append'></ng-content>
        </div>
    </el-input>
    <el-autocomplete-suggestions #sug *ngIf="suggestionList.length>0"
        [props]="props"
        class="{{popperClass}}"
        [suggestions]="suggestionList"
        (itemClick)="select($event)"
    ></el-autocomplete-suggestions>
    
</div>